<template>
  <el-form ref="formRef" :model="modelValue" :inline="true" class="crud-search-form" @submit.native.prevent>
    <el-form-item v-for="field in fields" :key="field.prop" :label="field.label">
      <!-- Input类型 -->
      <CrudInput v-if="field.type === 'input'" :model-value="(modelValue[field.prop] as string | number)"
        @update:model-value="updateField(field.prop, $event)" @keyup.enter="handleSearch"
        :placeholder="field.placeholder || `请输入${field.label}`" :clearable="field.clearable !== false"
        v-bind="field.props" />

      <!-- Select类型 -->
      <CrudSelect v-else-if="field.type === 'select'"
        :model-value="(modelValue[field.prop] as string | number | boolean | object | (string | number | boolean | object)[])"
        @update:model-value="updateField(field.prop, $event)" @keyup.enter="handleSearch" :placeholder="field.placeholder || `请选择${field.label}`"
        :clearable="field.clearable !== false" v-bind="field.props">
        <el-option v-for="option in field.options" :key="option.value" :label="option.label" :value="option.value" />
      </CrudSelect>

      <!-- Date类型 -->
      <el-date-picker v-else-if="field.type === 'date'"
        :model-value="(modelValue[field.prop] as string | number | Date | [Date, Date])"
        @update:model-value="updateField(field.prop, $event)" @keyup.enter.native="handleSearch" :type="field.dateType || 'date'"
        :placeholder="field.placeholder || `请选择${field.label}`" :clearable="field.clearable !== false"
        class="crud-date-picker" v-bind="field.props" />
    </el-form-item>

    <!-- 按钮组 -->
    <el-form-item>
      <div class="form-buttons">
        <CrudButton type="danger" size="small" @click="handleSearch">
          {{ searchText }}
        </CrudButton>
        <CrudButton type="info" size="small" @click="handleReset">
          {{ resetText }}
        </CrudButton>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElForm, ElFormItem, ElOption, ElDatePicker } from 'element-plus'
import CrudInput from '@/components/crudstyle/CrudInput/index.vue'
import CrudSelect from '@/components/crudstyle/CrudSelect/index.vue'
import CrudButton from '@/components/crudstyle/CrudButton/index.vue'

/**
 * 搜索字段选项接口
 */
export interface FieldOption {
  label: string
  value: string | number
}

/**
 * 搜索字段配置接口
 */
export interface SearchField {
  /** 字段属性名 */
  prop: string
  /** 字段标签 */
  label: string
  /** 字段类型 */
  type: 'input' | 'select' | 'date'
  /** 占位符文本 */
  placeholder?: string
  /** 是否可清空 */
  clearable?: boolean
  /** select的选项（仅type为select时需要） */
  options?: FieldOption[]
  /** date的类型（仅type为date时使用） */
  dateType?: 'date' | 'datetime' | 'daterange' | 'datetimerange' | 'month' | 'year'
  /** 额外的props传递给具体组件 */
  props?: Record<string, unknown>
}

/**
 * 组件属性接口
 */
interface Props {
  /** 表单数据对象 */
  modelValue: Record<string, unknown>
  /** 搜索字段配置数组 */
  fields: SearchField[]
  /** 搜索按钮文本 */
  searchText?: string
  /** 重置按钮文本 */
  resetText?: string
}

/**
 * 组件事件接口
 */
interface Emits {
  /** 更新表单数据 */
  (e: 'update:modelValue', value: Record<string, unknown>): void
  /** 搜索事件 */
  (e: 'search'): void
  /** 重置事件 */
  (e: 'reset'): void
}

// 定义组件属性
const props = withDefaults(defineProps<Props>(), {
  searchText: '搜索',
  resetText: '重置'
})

// 定义组件事件
const emit = defineEmits<Emits>()

// 表单引用
const formRef = ref<InstanceType<typeof ElForm>>()

/**
 * 更新字段值
 */
const updateField = (prop: string, value: unknown): void => {
  const newData = { ...props.modelValue, [prop]: value }
  emit('update:modelValue', newData)
}

/**
 * 处理搜索
 */
const handleSearch = (): void => {
  emit('search')
}

/**
 * 处理重置
 */
const handleReset = (): void => {
  // 重置所有字段为空值
  const resetData: Record<string, unknown> = {}
  props.fields.forEach(field => {
    resetData[field.prop] = ''
  })
  emit('update:modelValue', resetData)
  emit('reset')
}

/**
 * 重置表单字段
 */
const resetFields = (): void => {
  formRef.value?.resetFields()
}

// 暴露方法给父组件
defineExpose({
  resetFields
})
</script>

<style lang="scss" scoped>
.crud-search-form {
  :deep(.el-form-item) {
    margin-bottom: 0;
    margin-right: 16px;

    // 输入框和选择框容器设置最小宽度
    .crud-input,
    .crud-select,
    .crud-date-picker {
      min-width: 180px;
    }
  }

  :deep(.el-form-item__label) {
    color: #666;
    font-weight: 500;
  }

  .form-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
    height: 32px;
    padding-top: 4px;
  }

  // 日期选择器样式
  .crud-date-picker {
    width: 100%;

    :deep(.el-input__wrapper) {
      border-radius: 6px;
      border: none;
      background-color: #f5f5f5;
      box-shadow: none;
      padding: 0 12px;

      &:hover {
        background-color: #eeeeee;
      }

      &.is-focus {
        background-color: #eeeeee;
        box-shadow: none;
      }
    }

    :deep(.el-input__inner) {
      color: #666666;

      &::placeholder {
        color: #999999;
      }
    }

    :deep(.el-input__prefix) {
      color: #666666;
    }

    :deep(.el-input__suffix) {
      color: #666666;
    }
  }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .crud-search-form {
    :deep(.el-form-item__label) {
      color: #e0e0e0;
    }

    .crud-date-picker {
      :deep(.el-input__wrapper) {
        background-color: #2c2c2c;
        border-color: #404040;

        &:hover {
          background-color: #333333;
        }

        &.is-focus {
          background-color: #333333;
        }
      }

      :deep(.el-input__inner) {
        color: #e0e0e0;

        &::placeholder {
          color: #808080;
        }
      }

      :deep(.el-input__prefix),
      :deep(.el-input__suffix) {
        color: #e0e0e0;
      }
    }
  }
}
</style>
